<template>
	<view class="page-content">
		<navbar>
			<template v-slot:left>
				<view class="header-bar-left">
					<image src="../../static/index/location.png" style="height: 48rpx; width: 48rpx"></image>
					<span>{{province}}</span>
				</view>
			</template>
			<template v-slot:center>
				<view class="header-bar-center" @click="handleToSearch">
					<span class="header-bar-center-title">搜索</span>
					<view class="header-bar-center-search">
						<image src="../../static/index/search.png" style="height: 100%; width: 100%"></image>
					</view>
				</view>
			</template>
		</navbar>
		<view class="notice">
			<u-notice-bar bg-color="transparent" color="#000" :list="noticeList" font-size="24"></u-notice-bar>
		</view>
		<view class="menu-list">
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(listItem, listIndex) in menuList" :key="listIndex">
					<cusmenuitem :data="listItem" />
				</u-grid-item>
			</u-grid>
		</view>
		<view class="cards-list" style="margin-top: 32rpx">
			<tab-title-item title="推荐">
				<template v-slot:right>
					<view class="changeData" @click="getRecommentList">
						<image src="../../static/index/reload.png" mode=""></image>换一批
					</view>
				</template>
			</tab-title-item>
			<view class="flex-col" style="gap: 20rpx;padding-bottom: 32rpx;">
				<template v-if="recommentList.length===0&&status==='nomore'">
					<empty></empty>
				</template>
				<template v-else>
				<block v-for="(item,index) in recommentList" :key="index">
					<block v-if="item.rType==1">
						<view
							@click="handleLinkTo(`/page_index/cwbasi/congwu-plan-detail/congwu-plan-detail?id=${item.id}&distance=${item.distance}`)">
							<plan-card :data="item" />
						</view>
					</block>
					<block v-else-if="item.rType==2"></block>
					<block v-else-if="item.rType==3"></block>
					<block v-else-if="item.rType==4"></block>
					<block v-else-if="item.rType==5"></block>
					<block v-else-if="item.rType==6"></block>
					<block v-else-if="item.rType==7">
						<view @click="handleLinkTo(`/pages/index/pet-checked/checked-detail/checked-detail?id=${item.id}`)">
							<checked-card :data="item" />
						</view>
					</block>
					<block v-else-if="item.rType==8">
						<view @click="handleLinkTo(`/pages/index/pet-school/pet-teacher-detail/pet-teacher-detail?id=${item.id}`)">
							<teacher-card :data="item" />
						</view>
					</block>
					<block v-else-if="item.rType==9">
						<view @click="handleLinkTo(`/page_index/report-loss/offer-edtail/offer-edtail?id=${item.id}`)">
							<bounty-offered-card :data="item" />
						</view>
					</block>
					<block v-else-if="item.rType==10">
						<view @click="handleLinkTo(`/pages/index/pet-baomu/baomu-detail/baomu-detail?id=${item.id}`)">
							<baomu-card :data="item" />
						</view>
					</block>
					<block v-else-if="item.rType==11">
						<view @click="handleLinkTo(`/page_index/pet-party/party-detail/party-detail?id=${item.id}`)">
							<party-card :data="item"></party-card>
						</view>
					</block>
					<block v-else-if="item.rType==12">
						<view @click="handleLinkTo(`/pages/index/cwbz/bzsDetail/bzsDetail?id=${item.id}`)">
							<bzs-card :data="item" />
						</view>
					</block>
				</block>
				<u-loadmore v-if="status=='loading'" :status="status" />
				</template>
			</view>
		</view>
		<login-popup :show="showLogin" @onSuccess="handleSuccess" />
	</view>
</template>

<script>
	import navbar from "components/common/navbar/navbar.vue";
	import cusmenuitem from "components/index/menu-item.vue";
	import tabTitleItem from "components/index/tab-title-item.vue";
	import loginPopup from "components/common/login/login-popup.vue";
	import carCard from "components/common/card/car-card.vue"; //附近车辆
	import planCard from "components/common/card/plan-class-card.vue"; //宠物计划
	import driverPlanCard from "components/common/card/driver-plan-card.vue"; //司机计划
	import partyCard from "components/common/card/pet-party/components/party-card.vue"; //宠物派对
	import detectiveCard from "components/common/card/report-loss/components/pet-detective-card.vue"; //宠物侦探
	import bountyOfferedCard from "components/common/card/report-loss/components/bounty-offered-card.vue"; //悬赏
	import bagLossCard from "components/common/card/report-loss/components/bag-loss-card.vue"; //挂丢
	import teacherCard from "../../pages/index/pet-school/components/teacher-card.vue"; //训宠师
	import baomuCard from "../../pages/index/pet-baomu/components/baomu-card.vue"; //保姆
	import bzsCard from "components/index/cmbz/bzs-card.vue"; //殡葬师
	import checkedCard from "components/common/card/checked-card.vue";
	import empty from "components/common/empty/empty.vue";
	import utils from '../../utils/util.js';
	import mine from "../../api/mine.js";
	const app = getApp();
	export default {
		data() {
			return {
				province: '',
				showLogin: false,
				noticeList: [
					"温馨提示：感谢您使用宠行宝•宠物巴士服务，平台提供信息共享服务，请您保护好自己的财产安全，期间的财物及人身安全责任需自行承担。",
				],
				menuList: [{
						icon: "/static/index/menu2.png",
						title: "宠物出行",
						url: "/page_index/cwbasi/cwbslist/cwbslist",
					},
					{
						icon: "/static/index/menu3.png",
						title: "宠物帮遛",
						url: "/pages/index/cwbl/cwblList/index",
					},
					{
						icon: "/static/index/menu4.png",
						title: "领养·出售",
						url: "/pages/index/lyCs/lycsList/index",
					},
					{
						icon: "/static/index/menu5.png",
						title: "宠物医生",
						url: "/pages/index/cw-doctor/doctor-list/doctor-list",
					},
					{
						icon: "/static/index/menu6.png",
						title: "寄养·配对",
						url: "/pages/index/jyPd/jyPdList/jyPdList",
					},
					{
						icon: "/static/index/menu7.png",
						title: "美容·写真",
						url: "/pages/index/mr-xz/mrxz-list/mrxz-list",
					},
					{
						icon: "/static/index/menu12.png",
						title: "宠物托运",
						url: "/pages/index/pet-checked/checked-list/checked-list",
					},
					{
						icon: "/static/index/menu8.png",
						title: "宠物学校",
						url: "/pages/index/pet-school/school-list/school-list",
					},
					{
						icon: "/static/index/menu1.png",
						title: "挂失·报丢",
						url: "/page_index/report-loss/report-loss-list/report-loss-list",
					},
					{
						icon: "/static/index/menu11.png",
						title: "宠物保姆",
						url: "/pages/index/pet-baomu/baomu-list/baomu-list",
					},
					{
						icon: "/static/index/menu10.png",
						title: "宠物派对",
						url: "/page_index/pet-party/party-list/party-list",
					},
					{
						icon: "/static/index/menu9.png",
						title: "宠物殡葬",
						url: "/pages/index/cwbz/cmbz/cmbz",
					},
				],
				filterParmas: {
					nowLat: 0,
					nowLng: 0,
				},
				recommentList: [],
				status:'loadmore',
			};
		},
		onLoad() {
			this.province = app.globalData.city;
			uni.$on('city', (city) => {
				this.province = city.msg
			});
			uni.$on('islogin', (data) => {
				this.showLogin = !data.msg
			});
		},
		onShow() {
			if (!uni.getStorageSync('userinfo')) {
				this.showLogin = true
			}
			utils.getLocationInfo().then(res => {
				this.filterParmas.nowLat = res.latitude;
				this.filterParmas.nowLng = res.longitude;
				this.getRecommentList();
			}).catch(err => {
				this.getRecommentList();
			})
		},
		methods: {
			handleToSearch() {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			},
			getRecommentList() {
				this.recommentList=[];
				this.status='loading';
					mine.queryRecommendations(this.filterParmas).then(res => {
						if (res.code === 200) {
							this.recommentList = res.data;
							this.status='loadmore';
						}
					})
				
			},
			handleSuccess() {
				this.getRecommentList()
			},
			handleLinkTo(url) {
				uni.navigateTo({
					url: `${url}`,
				});
			},
		},
		onHide() {
			this.showLogin = false
		},
		components: {
			navbar,
			cusmenuitem,
			tabTitleItem,
			loginPopup,
			checkedCard,
			carCard,
			planCard,
			driverPlanCard,
			partyCard,
			detectiveCard,
			bountyOfferedCard,
			bagLossCard,
			teacherCard,
			baomuCard,
			bzsCard,
			empty
		},
	};
</script>

<style lang="scss" scoped>
	.page-content {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		background: linear-gradient(to bottom, #fcd71d, #fff0b8);
		padding: 0 32rpx;

		.header-bar-left {
			display: flex;
			align-items: center;

			>span {
				height: 100%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				line-height: 32rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}

		.header-bar-center {
			height: 56rpx;
			background: #ffffff;
			border-radius: 38rpx 38rpx 38rpx 38rpx;
			margin-left: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&-title {
				width: 48rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				line-height: 28rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				margin-left: 28rpx;
			}

			&-search {
				width: 44rpx;
				height: 44rpx;
				background: #fcd610;
				border-radius: 50%;
				padding: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 6rpx;
			}
		}

		.notice {
			margin-top: 28rpx;
			width: 100%;
			background: rgba(255, 255, 255, 0.4);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}

		.menu-list {
			margin-top: 24rpx;
			height: auto;
			width: 100%;
			background: #ffffff;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 8rpx 32rpx 32rpx 32rpx;

			// .u-grid {
			// 	gap: 30rpx 0;
			// }
		}

		.cards-list {
			.changeData {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 20rpx;
				color: #b4a771;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				display: flex;
				align-items: center;

				>image {
					height: 28rpx;
					width: 28rpx;
				}
			}
		}
	}
</style>